import React from 'react';
import MonacoEditor from "react-monaco-editor/lib/editor";
import "monaco-markdown";
import { Flex, Splitter, Typography } from 'antd';
import {MarkDownRender} from "./MarkDownRender";

export const MonacoEditorCodeComp = function ({code,language}) {

    if (language !== 'markdown') {
        return (
            <MonacoEditor
                width="100%"
                height={window.innerHeight}
                language={language}
                theme="vs"
                value={code}
                options={{
                    selectOnLineNumbers: true,
                    matchBrackets: "near",
                }}
            />
        )
    }
    else{

    return (
        <>
            <Splitter style={{ boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
                <Splitter.Panel defaultSize="50%" min="20%" max="70%">
                    <MonacoEditor
                        width="100%"
                        height={window.innerHeight}
                        language={language}
                        theme="vs"
                        value={code}
                        options={{
                            selectOnLineNumbers: true,
                            matchBrackets: "near",
                        }}
                    />
                </Splitter.Panel>
                <Splitter.Panel>
                    <MarkDownRender code={code} />
                </Splitter.Panel>
            </Splitter>

        </>
    )
        }

};